﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Carrossel.aspx.cs" Inherits="SindSaude.Carrossel" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <!--<link href="Scripts/bootstrap.css" rel="stylesheet" type="text/css" />-->
    <link href="Styles/carousel.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="js/jquery.cycle.all.js" type="text/javascript"></script>




    <script type="text/javascript">
        $(document).ready(function () {
            $(".slider").cycle({
                fx: 'fade',
                next: '#next',
                prev: '#prev',
                pager: $('.pager'),
                pagerAnchorBuilder: function (index, DOMelement) {
                    return '<a></a>';
                },
                activePagerClass: 'sliderActive'
            });
        });
    </script>


    <!--<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>-->
    <!--
    <script type="text/javascript">
        $(document).ready(function () {
            $("#featured").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 5000, true);
            $("#featured").hover(function () {
                $("#featured").tabs("rotate", 0, true);
            },
    function () {
        $("#featured").tabs("rotate", 5000, true);
    }
    );
        });
    </script>-->
    <!--<script src="Scripts/bootstrap.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    

    <script type="text/javascript">
        var $ = jQuery.noConflict();
        $(document).ready(function () {
            $('.carousel').carousel({
                interval: 4000,
                cycle: true,
                
            });
            console.log('oi');
        });
    </script>-->
    <title></title>
    <!--
<style type="text/css">
*
{
margin:0;
padding:0;
}

#container{
width: 420px;
	
}

#carrossel{
   width:404px;
   overflow:hidden;
   margin:0 auto;
   margin-left:28px;
}

#carrossel ul{
   list-style:none;
   float:left
}
#carrossel ul li{
   float:left;
   display:inline;
   margin-left:5px;
}

.prev
{
    position:absolute;		
    left:10px;
    top: 150px;
}

.next
{
    position:absolute;		
    left:450px;
    top: 150px;
}
.pagination {
    float:none;
    margin:-950px 250px 0px 0px;
}
.pagination a {
    background: url(../img/pontovermelho.png) 0 -300px no-repeat transparent;
    width: 15px;
    height: 15px;
    margin: 0 5px 0 0;
    display: inline-block;
}
.pagination a.selected {
    background-position: -25px -300px;
    cursor: default;
}
.pagination a span {
    display: none;
}

</style>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/carrossel.js"></script>
<script type="text/javascript">
    $(function () {
        $('#meuCarousel').jcarousel();
    });
</script>-->
</head>
<body>
<div class="box">
    
    <span class="pager"></span>
    
<div class="slider">
 
        <asp:Repeater ID="rpt_Imagens" runat="server">
            <ItemTemplate>
                <div class="slider-item">           
                    <div class="info">
                    <h2><a href="<%#Eval("url")%>" target="_parent"><%#Eval("strNome")%></a></h2>
                    <span><%#Eval("strSub_Nome")%><a href="<%#Eval("url")%>" target="_parent">Leia mais</a></span>
                    </div>
                    <img src='<%#Eval("strCaminho_Imagem")%>' width="600" height="300"  alt=""/>
                </div>
            </ItemTemplate>
        </asp:Repeater>
        
</div>
 <a href="#" id="next"><span class="icon-next"></span></a>
    <a href="#" id="prev"><span class="icon-prev"></span></a>
</div>






    <!--<form id="form1" runat="server">

    <div id="featured">
        <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragmet-3"><a href="#fragment-3"></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragmet-4"><a href="#fragment-4"></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"></a></li>
        </ul>
        
        <!-- 1o Content 
        <div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="imgHome/large/img1.jpg" alt="" />
            <div class="info">
                <h2><a href="#">Titulo Artigo</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">Leia mais</a></p>
            </div>        
        </div>

        <!-- 2o Content 
        <div id="fragment-2" class="ui-tabs-panel" style="">
            <img src="imgHome/large/img2.jpg" width="520" height="318" alt="" />
            <div class="info">
                <h2><a href="#">Texto Chamada</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">Leia mais</a></p>
            </div>        
        </div>

        <!-- 3o Content -
        <div id="fragment-3" class="ui-tabs-panel" style="">
            <img src="imgHome/large/img3.jpg" width="520" height="318" alt="" />
            <div class="info">
                <h2><a href="#">Texto Chamada</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">Leia mais</a></p>
            </div>        
        </div>

        <!-- 4o Content 
        <div id="fragment-4" class="ui-tabs-panel" style="">
            <img src="imgHome/large/img4.jpg" width="520" height="318" alt="" />
            <div class="info">
                <h2><a href="#">Texto Chamada</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">Leia mais</a></p>
            </div>        
        </div>

        <!-- 5o Content 
        <div id="fragment-5" class="ui-tabs-panel" style="">
            <img src="imgHome/large/img4.jpg" width="520" height="318" alt="" />
            <div class="info">
                <h2><a href="#">Texto Chamada</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">Leia mais</a></p>
            </div>        
        </div>
    </div>
    
    <!--
           <div id="myCarousel" class="carousel carousel-fade slide">
    
                <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>
                <li data-target="#myCarousel" data-slide-to="5"></li>
                </ol>
                <div class="carousel-inner">
                 <asp:Repeater ID="rptImagens" runat="server">
                <ItemTemplate>                     
                    
                     <div class="carousel-caption">
                      <h4>Titulo Legenda</h4>
                      <p>Texto Legenda</p>
                     </div>
                </ItemTemplate>
                </asp:Repeater>
                
                </div>
                <a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="icon-prev"></span></a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="icon-next"></span></a>
                </div>

             <script src="Scripts/carousel.js" type="text/javascript"></script>

    <!--
    <div id="container">
     <div><a href="#" class="prev"><img src="img/prev.png" border="0" /></a></div> 
		 <div id="carrossel">
		    <ul>
			    <li><img src="imgHome/img1.jpg" width="419" height="364" alt=""/></li>
			    <li><img src="imgHome/img2.jpg" width="419" height="364" alt=""/></li>
			    <li><img src="imgHome/img3.jpg" width="419" height="364" alt=""/></li>
			    <li><img src="imgHome/img4.jpg" width="419" height="364" alt=""/></li>
			    <li><img src="imgHome/img5.jpg" width="419" height="364" alt=""/></li>
			    <li><img src="imgHome/img6.jpg" width="419" height="364" alt=""/></li>
			</ul>
		  </div>	
		  <!-- define a imagem para o botão proximo 
		  <div><a href="#" class="next"><img src="img/next.png" border="0" /></a></div>
          <div class="pagination" id="foo2_pag"></div>
       </div>-->
    <!--</form>-->
</body>
</html>
